<template>
	<view class="detail__share--model" v-show="shareshow" @tap="hidenShow"></view>
	<view class="detail__share u-f-ac animate__animated animate__fadeInUp animate__fast" v-show="shareshow">
		<text class="detail__share--title">分享到</text>
		<view class="detail__share__body u-f-ac">
			<block v-for="(value,index) in providerList" :key="index">
					<view @tap="share(value)" v-if="value" :disabled="isDisableButton(value)">
						<text class="icon iconfont" :class="[value.iconclass,'detail__share__body--'+value.class]"></text>
						<text>{{value.name}}</text>
					</view>
			</block>

		</view>
		
		
		<text class="detail__share--btn" @tap="hidenShow">取消</text>
	</view>

</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onLoad,
		onShareAppMessage,
		
	} from '@dcloudio/uni-app';
	const props = defineProps({
		shareshow: {
			type: Boolean,
			required: true,
		},
		shareddata:{
			type:Object,
			required:true,
		}
	})

	const providerList = ref([])
	const shareText = ref('')
	const href = ref("")
	const image = ref('')
	const shareType = ref(0)
	

	const isDisableButton = computed(()=>{
			return function(item) {
				if(shareType.value === 0 && item.id === 'qq'){
					return true;
				}
				if(shareType.value === 5 && item.name !== '分享到微信好友'){
					return true;
				}
				return false;
			}
	})

	const emits = defineEmits(["update:shareshow"])

	function hidenShow() {
		emits("update:shareshow", false)
	}

	async function share(e) {
		console.log('分享通道:' + e.id + '； 分享类型:' + shareType.value);

		if (!shareText.value && (shareType.value === 1 || shareType.value === 0)) {
			uni.showModal({
				content: '分享内容不能为空',
				showCancel: false
			})
			return;
		}

		if (!image.value && (shareType.value === 2 || shareType.value === 0)) {
			uni.showModal({
				content: '分享图片不能为空',
				showCancel: false
			})
			return;
		}

		let shareOPtions = {
			provider: e.id,
			scene: e.type && e.type === 'WXSenceTimeline' ? 'WXSenceTimeline' :
			'WXSceneSession', //WXSceneSession”分享到聊天界面，“WXSenceTimeline”分享到朋友圈，“WXSceneFavorite”分享到微信收藏     
			type: shareType.value,
			success: (e) => {
				console.log('success', e);
				uni.showModal({
					content: '已分享',
					showCancel: false
				})
			},
			fail: (e) => {
				console.log('fail', e)
				uni.showModal({
					content: e.errMsg,
					showCancel: false
				})
			},
			complete: function() {
				console.log('分享操作结束!')
			}
		}

		switch (shareType.value) {
			case 0:
				shareOPtions.summary = shareText.value;
				shareOPtions.imageUrl = image.value;
				shareOPtions.title = shareddata.title;
				shareOPtions.href = shareddata.url;
				break;
			case 1:
				shareOPtions.summary = shareText.value;
				break;
			case 2:
				shareOPtions.imageUrl = image.value;
				break;
			case 5:
				shareOPtions.imageUrl = image.value ? image.value :
					'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b6304f00-5168-11eb-bd01-97bc1429a9ff.png'
				shareOPtions.title = '欢迎体验uniapp';
				shareOPtions.miniProgram = {
					id: 'gh_33446d7f7a26',
					path: '/pages/tabBar/component/component',
					webUrl: 'https://uniapp.dcloud.io',
					type: 0
				};
				break;
			default:
				break;
		}

		if (shareOPtions.type === 0 && plus.os.name === 'iOS') { //如果是图文分享，且是ios平台，则压缩图片 
			shareOPtions.imageUrl = await this.compress();
		}
		if (shareOPtions.type === 1 && shareOPtions.provider === 'qq') { //如果是分享文字到qq，则必须加上href和title
			shareOPtions.href = 'https://uniapp.dcloud.io';
			shareOPtions.title = '欢迎体验uniapp';
		}
		uni.share(shareOPtions);
	}



	onShareAppMessage(() => {
		return {
			title: shareText.value ? shareText.value : "",
			path: '/pages/tabBar/component/component',
			imageUrl: image.value ? image.value :
				'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/b6304f00-5168-11eb-bd01-97bc1429a9ff.png'
		}
	})
	
	onLoad(() => {
		uni.getProvider({
			service: 'share',
			success: (e) => {
				console.log('success', e);
				let data = []
				for (let i = 0; i < e.provider.length; i++) {
					switch (e.provider[i]) {
						case 'weixin':
							data.push({
								name: '微信好友',
								id: 'weixin',
								sort: 0,
								iconclass:"icon-weixin",
								class:"weixin"
								
							})
							data.push({
								name: '微信朋友圈',
								id: 'weixin',
								type: 'WXSenceTimeline',
								sort: 1,
								iconclass:"icon-weixin",
								class:"penyouquan"
							})
							break;
						case 'sinaweibo':
							data.push({
								name: '新浪微博',
								id: 'sinaweibo',
								sort: 2,
								iconclass:"icon-xinlangweibo",
								class:"weibo"
							})
							break;
						case 'qq':
							data.push({
								name: 'QQ',
								id: 'qq',
								sort: 3,
								iconclass:"icon-qq",
								class:"qq"
							})
							break;
						default:
							break;
					}
				}
				providerList.value = data.sort((x, y) => {
					return x.sort - y.sort
				});
			},
			fail: (e) => {
				console.log('获取分享通道失败', e);
				uni.showModal({
					content: '获取分享通道失败',
					showCancel: false
				})
			}
		});
	})
</script>

<style lang="scss" scoped>
	.detail__share {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999;
		background-color: #FFFFFF;
		flex-direction: column;
		justify-content: center;
		padding: 20upx;

		&--title {
			font-size: 36upx;
			margin: 10upx 0;

		}

		&--model {
			position: fixed;
			inset: 0;
			z-index: 9998;
			background-color: rgba(0, 0, 0, .3);
		}

		&__body {
			min-width: 100%;
			margin: 10upx 0 20upx;
			justify-content: flex-start;
			overflow-x: auto;

			>view {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 25%;
				flex-shrink: 0;

				>text:first-of-type {
					border-radius: 50%;
					width: 100upx;
					height: 100upx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: white;
					font-size: 50upx;
				}

				>text:last-of-type {
					color: #ccc;
					font-size: 20upx;
				}


			}

			&--weixin {
				background-color: #11ad9e;
			}

			&--penyouquan {
				background-color: #504e48;
			}

			&--weibo {
				background-color: #ff795d;
			}

			&--qq {
				background-color: #4682d4;
			}

		}

		&--btn {
			border-top: 1upx solid #ccc;
			width: 100%;
			padding: 26upx 0 6upx;
			text-align: center;
			font-size: 36upx;
		}
	}
</style>